<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>不定高的div居中</title>
</head>
<style>
	.father {
		width: 200px;
		height: 200px;
		border: 1px solid black;
		text-align: center;
	}

	.children {
		display: inline-block;
	}
</style>

<body>
	<table>
		<tbody>
			<tr>
				<td class="father">
					<div class="children">123</div>
				</td>
			</tr>
		</tbody>
	</table>
	<script>
		let ele = document.querySelector('.father')
		setInterval(function () {
			ele.style.height = 170 + Math.random() * 60 + "px"
			ele.style.width = 150 + Math.random() * 100 + "px"
		}, 500)
	</script>
</body>

</html>